<template>
	<view>
		<view class="ShopLogin">
			<image src="../../../../static/images/register_bg.png" mode="scaleToFill" class="bgImg"></image>
			<view class="register_log">
				<image src="../../../../static/images/register_log_03_03.png" mode="widthFix"></image>
			</view>
			<view class="register_form">
				<view class="input_view">
					<view>
						<image src="../../../../static/images/login_icon_03.png" mode="widthFix" class="register_icon"></image>
					</view>
					<view>
						<input type="number" placeholder="请输入手机号" placeholder-class="placeholder" v-model="phoneVal"></input>
					</view>
				</view>
				<view class="input_view">
					<view>
						<image src="../../../../static/images/register_log_08.png" mode="widthFix" class="register_icon"></image>
					</view>
					<view>
						<input type="password" placeholder="请输入密码" placeholder-class="placeholder" v-model="passwordVal"></input>
					</view>
				</view>
				<view class="login_button">
					<button @click="login()">进入千寻</button>
				</view>
				<view class="forgetPassword">
					<navigator url="../ShopForgetPassword/ShopForgetPassword" hover-class="none">
						<text>忘记密码？</text>
					</navigator>	
				</view>
		    </view>
			<view class="noMember">
				<navigator url="../ShopRegistration/ShopRegistration" hover-class="none" open-type="redirect">
					<text>没有账户？注册一个吧！</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneVal:"",
				passwordVal:"",
			}
		},
		methods: {
			//表单验证
			checkForm(){
				let flag=true
				// 不为空
				if(this.phoneVal==""){  //手机号
					uni.showToast({
						title:"手机号不得为空！",
						duration:2000,
						icon:"none"
					});
					return flag=false;   
				}else{
					//手机号格式验证
					if(!(/^1[34578]\d{9}$/.test(this.phoneVal))){ 
					    uni.showToast({
						    title:"手机号有误，请重新输入!",
						    duration:2000,
						    icon:"none"
					    });
					   return flag=false; 
					} 
				}
				if(this.passwordVal==""){
					uni.showToast({
					    title:"密码不得为空!",
					    duration:2000,
					    icon:"none"
					});
					return flag=false; 
				}
				return flag;
			},
			//登录按钮点击函数
			login(){
				uni.showLoading({
					title:"登录中...",
					duration:1000,
					mask:true
				})
				let that=this;
				this.checkForm();
				console.log(this.checkForm());
                 uni.request({
					url: this.$store.state.URL + 'merchant/merchant/mini_merchant_login',
					data:{
						token:this.$store.state.token,
						adminAccount: this.phoneVal,
						adminPassword: this.passwordVal,
					},
					success(res) {
						console.log(res);
						that.$store.commit('updataMerchantToken',res.data.token);
						if(res.data.status == 1){
						    uni.hideLoading();
							setTimeout(function(){
								uni.redirectTo({
									url:"../backgroundAccount/backgroundAccount"
								})
							},1000)
						}else{
							if(that.checkForm()){
								uni.showToast({
								title:res.data.msg,
								duration:1000,
								icon:"none",
								mask:true
							   })	
							}   					
						}
						
					}
				})
			},
		},
		onLoad() {
		   console.log(this.$store.state.token);
		}
	}
</script>

<style>
.bgImg{
	 position: absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
	 z-index: -1;
 }
 .register_log{
	 margin-top:30%;
	 margin-left:40%;
	 position:relative;
 }
 .register_log image{
	 width:151upx;
	 height:205upx;
 }
 .register_form{
	 margin-top:30upx;
	 width:90%;
	 height:auto;
	 margin:0 auto;
	 background:#fff;
	 text-align: center;
	 padding-bottom: 50upx;
	 border-radius: 30upx;
 }
 .input_view view:nth-of-type(2){
	 margin-left: 70upx;
 }
 .input_view{
	 height: 44upx;
/* 	 border-radius: 20%; */
     display: flex;
	 /* justify-content: flex-start; */
	 padding-top:50upx;
	 padding-bottom: 20upx;
	 margin:30upx 10%;
	 border-bottom: 1upx solid #cccccc;
 }
 .input_view .register_icon{
	 width:37upx;
	 height:37upx;
 }
 .input_view .register_delete{
	 width:44upx;
	 height:44upx;
 }
 .input_view input{
	 font-size: 28upx;
	 color: #333;
 }
 .placeholder{
	 font-size: 28upx;
	 color:#999;
 }
 .login_button button{
	 font-size:30upx;
	 color: #fff;
	 background:#f2526f;
	 width:544upx;
	 heihgt:83upx;
	 border-radius: 42upx;
 }
 .forgetPassword text{
	 font-size: 24upx;
	 color: #333;
	 margin-top: 30upx;
	 display: block;
 }
 .noMember{
	 text-align: center;
 }
 .noMember text{
	 font-size: 24upx;
	 color: #333;
 }
</style>
